<template>
    <div>
        <!-- <input type="text" v-focus> -->
        <button v-if="counter < 5" v-leon.abc.def="'leoncoder'" @click="changeCounter">当前计数: {{counter}}</button>
    </div>
</template>

<script>
    import { ref } from 'vue';
    export default {


        // 局部指令
        directives: {
            leon: {
                created(el, bindings, vNode, preVNode) {
                    console.log('leon created', el, bindings, vNode, preVNode);
                    console.log(bindings);
                    console.log(bindings.value);
                    console.log(bindings.modifiers);
                },
                beforeMount() {
                    console.log('beforeMounted');
                },
                mounted() {
                    console.log('mounted');
                },
                beforeUpdate() {
                    console.log('beforeUpdate');
                },
                updated() {
                    console.log('updated');
                },
                beforeUnmount() {
                   console.log('beforeUnmount');
                },
                unmounted() {
                    console.log('unmounted');
                }
            }
        },
        setup() {
            const counter = ref(0);

            const changeCounter = () => {
                counter.value++;
            }

            return {
                counter,
                changeCounter
            }
        }
    }
</script>

<style scoped>

</style>